<!--
 * @Author: fisher
 * @Date: 2022-10-20 17:35:47
 * @LastEditTime: 2022-10-26 10:15:27
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \jiang_learnjs\demo1\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .background {
        width: 100%;
        height: 100%;
        /* max-width: 3840px; */
        background: #487eb0;
        top: 0;
        position: absolute;
        z-index: -1;
    }

    .header {
        top: 0px;
        padding: 0;
        width: 100%;
        min-width: 1920px;
    }

    #top-layer {
        position: absolute;
        width: 100%;
        margin: 0;
        top: 0;
        left: 0px;
        z-index: 1;
    }

    #top-layer>img {
        width: 100%;
    }

    #top-title {
        left: 1600px;
        position: relative;
        top: 5px;
        z-index: 2;
    }

    #usericon {
        position: relative;
        top: 13px;
        right: 31px;
        z-index: 3;
        float: right;
    }

    #settingicon {
        position: absolute;
        top: 53px;
        right: 200px;
        float: right;
        width: 14.41px;
        height: 14.41px;
        z-index: 3;

    }

    .setting {
        position: absolute;
        top: 70px;
        right: 118px;
        width: 50px;
        height: 32px;
        float: right;
        font-size: 20px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        color: #C1E8FD;
        line-height: 0px;
        z-index: 4;
    }

    #datetime {
        color: #C1E8FD;
        position: absolute;
        top: 10px;
        left: 40px;
        font-size: 28px;
        z-index: 3;
    }

    .rightbar {
        display: flex;
        flex-direction: column;
        right: 40px;
        top: 181px;
        gap: 60px;
        float: right;
        position: relative;

    }

    .leftbar {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 640px;
        height: 1240px;
        top: 66px;
        left: 25px;
        background: #000D18;
        border-radius: 0px 0px 0px 0px;
        opacity: 0.6;
    }

    #leftborder1 {
        width: 30px;
        height: 4px;
        top: -16px;
        position: absolute;
        background: #05AFE6;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
    }

    #leftborder2 {
        width: 18px;
        height: 4px;
        background: #02739B;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        top: -16px;
        left: 20px;
        position: absolute;
        background: #05AFE6;
    }

    .lefticon1 {
        width: 46px;
        height: 44px;
        left: 70px;
        top: -1135px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 122px;
        z-index: 4;
    }

    .lefticon2 {
        width: 46px;
        height: 44px;
        left: 70px;
        top: -520px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 270px;
        z-index: 4;
    }

    h1 {
        width: 250px;
        height: 52px;
        top: -1235px;
        left: 140px;
        position: relative;
        letter-spacing: 8px;
        text-align: left;
        font-family: Microsoft YaHei-Bold;
        font-weight: bold;
        font-size: 40px;

    }

    h2 {
        width: 250px;
        height: 52px;
        top: -1215px;
        left: 235px;
        text-align: left;
        position: relative;
        letter-spacing: 8px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        font-size: 40px;
        color: #00d5ff;
    }

    h3 {
        width: 350px;
        height: 52px;
        top: -1145px;
        left: 235px;
        text-align: left;
        position: relative;
        letter-spacing: 8px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        font-size: 40px;
        color: #FFFFFF;
    }

    h4 {
        width: 350px;
        height: 52px;
        top: -705px;
        left: -110px;
        text-align: left;
        position: relative;
        letter-spacing: 8px;
        font-family: Microsoft YaHei-Regular;
        font-weight: 400;
        font-size: 40px;
        color: #FFFFFF;
    }

    .menu1 {
        display: flex;
        flex-direction: column;
        gap: 40px;
        float: left;
        position: relative;
    }

    a:link {
        color: #FFFFFF;
        text-decoration: none;
    }

    a:visited {
        color: #FFFFFF;
        text-decoration: none;
    }

    .bottom {
        position: absolute;
        width: auto;
        bottom: -12px;
        padding: 0;
        left: 13%;
        margin: 0;
    }
</style>


<script>
    var i = 0;
    function myDate() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        document.getElementById("datetime").innerHTML = year + "/" + month + "/" + day + "  " + hours + ":" + minutes + ":" + seconds;
    }
    setInterval(myDate, 1000);
</script>


<body>
    <div class="background"></div>
    <div class="header">
        <p id="datetime" onload=myDate()></p>
        <a href="#userinfo" id="usericon">
            <img src="首页_slices\touxiang.png" alt="touxiang">
        </a>
        <p id="top-title">
            <img src="首页_slices\组 105@2x.png" alt="biaoti">
        </p>
        <p id="top-layer"><img src="首页_slices\样式八@2x.png" alt="tup">
        </p>
        <a class="setting" href="#settings">设置</a>
        <a href="" id="settingicon">
            <img src="首页_slices\205设置@2x.png" alt="settingicon">
        </a>

    </div>

    <div class="rightbar" width="72px" height="68px">
        <a href=""><img src="首页_slices\蒙版组 3@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 3@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 4@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 47@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 6@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 48@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 49@2x.png" alt=""></a>
        <a href=""><img src="首页_slices\蒙版组 65@2x.png" alt=""></a>
    </div>

    <div class="leftbar">

    </div>

    <p id="leftborder1"></p>
    <p id="leftborder2"></p>

    <div class="lefticon1">
        <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 50@2x.png" alt="">
        </p>
        <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 62@2x.png" alt="">
        </p>
    </div>

    <div class="lefticon2">
        <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 64@2x.png" alt="">
        </p>
        <p style=" border: #707070;border-style: dotted;border-width: 1px;"><img src="首页_slices\蒙版组 63@2x.png" alt="">
        </p>
    </div>

    <h1 style="color:white;">
        <a href="">项目区位</a>
        <br><br><br><br>
        <a href="">现状概况</a>
        <br><br><br><br> <br><br><br><br><br>
        <a href="">上位规划</a>
        <br><br><br><br><br><br><br>
        <a href="">规划方案</a>
    </h1>

    <h2><a href="">项目区位</a></h2>

    <h3 class="menu1">
        <a href="">南山水厂现状</a>
        <a href="">地块用地条件</a>
        <a href="">地下空间规划</a>
        <a href="">地面交通规划</a>
    </h3>

    <h4 class="menu1">
        <a href="">总平面图布置</a>
        <a href="">分期实施方案</a>
        <a href="">地块规划方案</a>
    </h4>

    <div class="bottom">
        <p><img src="首页_slices\底部@2x.png" alt=""></p>
    </div>

</body>

</html>